import './Header.scss'
import React from 'react';
import {connect} from 'react-redux'
import {changeFilter, changeTab, getFileterData} from '../actions/headerAction.js';
import {TABKEY} from '../config.js'
import {getListDate} from '../actions/contentListAction.js';

//渲染TAB
class Header extends React.Component {
  constructor(props) {
    super(props)
    this.fetchData()
  }
  
  //点击显示tab
  changeTab(key) {
    let closePanel = false
    if (this.props.activekey === key && !this.props.closePanel) {
      closePanel = true
    }
    this.props.dispatch(changeTab({
      activekey: key,
      closePanel: closePanel
    }))
  }
  
  //渲染表头
  renderTabs() {
    let tabs = this.props.tabs
    let array = []
    for (let key in tabs) {
      let item = tabs[key]
      let cls = item.key + ' item'
      if (item.key === this.props.activekey && !this.props.closePanel) {
        cls += ' current'
      }
      array.push(
        <div className={cls} key={item.key} onClick={() => this.changeTab(item.key)}>
          {item.text}
        </div>
      )
    }
    return array
  }
  
  //获取过滤数据
  fetchData() {
    this.props.dispatch(getFileterData())
    this.props.dispatch(getListDate())
  }
  
  reverActive(key, dataList) {
    if (key == TABKEY.cate) {
      for (let i = 0; i < dataList.length; i++) {
        for (let j = 0; j < dataList[i].sub_category_list.length; j++) {
          dataList[i].sub_category_list[j].active = false
        }
      }
    }
    if (key == TABKEY.type) {
      for (let i = 0; i < dataList.length; i++) {
        dataList[i].active = false;
      }
    }
    if (key == TABKEY.filter) {
      for (let i = 0; i < dataList.length; i++) {
        for (let j = 0; j < dataList[i].items.length; j++) {
          dataList[i].items[j].active = false
        }
      }
    }
  }
  
  //变化当前点击的状态，同时发起请求
  changeDoFilter(item, key, dataList) {
    this.reverActive(key, dataList)
    item.active = true
    this.props.dispatch(changeFilter({
      item,
      key
    }))
    this.props.dispatch(getListDate({
      filterData: item,
      toFirstPage: true
    }))
  }
  
  //分类中里面条目
  renderCateInnerContent(item, cateList) {
    return item.sub_category_list.map((item, index) => {
      let cls = item.active ? 'cate-box-inner active' : 'cate-box-inner'
      return (
        <div onClick={() => this.changeDoFilter(item, TABKEY.cate, cateList)} className='cate-box' key={index}>
          <div className={cls}>
            {item.name}({item.quantity})
          </div>
        </div>
      )
    })
  }
  
  //全部分类外类
  renderCateContent() {
    let cateList = this.props.filterData.category_filter_list || []
    return cateList.map((item, index) => {
      return (
        <li key={index} className='cate-item'>
          <p className='item-title'>
            {item.name}
            <span className='item-count'>
              {item.quantity}
            </span>
          </p>
          <div className='item-content clearfix'>
            {this.renderCateInnerContent(item, cateList)}
          </div>
        </li>
      )
    })
  }
  
  //综合排序类
  renderTypeContent() {
    let typeList = this.props.filterData.sort_type_list || []
    return typeList.map((item, index) => {
      let cls = item.active ? 'type-item active' : 'type-item'
      return (
        <li onClick={() => this.changeDoFilter(item, TABKEY.type, typeList)} className={cls} key={index}>
          {item.name}
        </li>
      )
    })
  }
  
  
  //筛选内层条目
  renderFilterInnerContent(items, filterList) {
    return items.map((item, index) => {
      let cls = item.icon ? 'cate-box-inner has-icon' : 'cate-box-inner'
      if (item.active) {
        cls += ' active'
      }
      return (
        <div onClick={() => this.changeDoFilter(item, TABKEY.filter, filterList)} className='cate-box' key={index}>
          <div className={cls}>
            {item.icon ? <img src={item.icon}/> : null}{item.name}
          </div>
        </div>
      )
    })
  }
  
  //筛选条目
  renderFilterContent() {
    let filterList = this.props.filterData.activity_filter_list || []
    return filterList.map((item, index) => {
      return (
        <li className='filter-item' key={index}>
          <div className='filter-title'>{item.group_title}</div>
          <div className='item-content clearfix'>
            {this.renderFilterInnerContent(item.items, filterList)}
          </div>
        </li>
      )
    })
  }
  
  //渲染过滤板面
  renderContent() {
    let tabs = this.props.tabs
    let array = []
    for (let key in tabs) {
      let item = tabs[key]
      let cls = item.key + '-panel';
      if (item.key === this.props.activekey) {
        cls += ' current'
      }
      if (item.key === TABKEY.cate) {
        array.push(
          <ul key={item.key} className={cls}>
            {this.renderCateContent()}
          </ul>
        )
      }
      if (item.key === TABKEY.type) {
        array.push(
          <ul key={item.key} className={cls}>
            {this.renderTypeContent()}
          </ul>
        )
      }
      if (item.key === TABKEY.filter) {
        array.push(
          <ul key={item.key} className={cls}>
            {this.renderFilterContent()}
          </ul>
        )
      }
    }
    return array
  }
  
  render() {
    
    let cls = 'panel'
    if (!this.props.closePanel) {
      cls += ' show'
    } else {
      cls += ' none'
    }
    return (
      <div className='header'>
        <div className='header-top'>
          {this.renderTabs()}
        </div>
        <div className={cls}>
          <div className='panel-inner'>
            {this.renderContent()}
          </div>
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({
    tabs: state.headerReducer.tabs,
    activekey: state.headerReducer.activekey,
    filterData: state.headerReducer.filterData,
    closePanel: state.headerReducer.closePanel
  })
)(Header)